<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>代码生成工具</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" th:href="@{css/index.css}">
    <style>
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="header">
            代码生成工具,智能生成代码,减少大量重复的CRUD工作,用查询数据库表字段,生成JPA/JdbcTemplate/Mybatis/MybatisPlus/BeetlSQL相关代码。
        </el-header>
        <el-main class="main">
            <div style="margin-bottom: 30px;">
                <!--                <el-radio-group v-model="tabPosition">-->
                <!--                    <el-radio-button label="top">上</el-radio-button>-->
                <!--                    <el-radio-button label="right">右</el-radio-button>-->
                <!--                    <el-radio-button label="bottom">下</el-radio-button>-->
                <!--                    <el-radio-button label="left">左</el-radio-button>-->
                <!--                </el-radio-group>-->
                <el-link href="./h2-console" type="success" target="_blank">h2数据库</el-link>
            </div>

            <el-tabs :tab-position="tabPosition" style="height: 90%;">
                <el-tab-pane label="数据库">
                    <el-button type="primary" @click="openDialogDB('新增数据库', '')">新增数据库</el-button>
                    <el-button type="primary" icon="el-icon-refresh" circle @click="refreshDBList"></el-button>
                    <el-table
                            :data="dbList"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                prop="dbName"
                                label="数据库版本"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="driver"
                                label="驱动"
                                width="300">
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="账号"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="password"
                                label="密码"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                label="链接地址"
                                min-width="360">
                        </el-table-column>
                        <el-table-column
                                prop="tableSchema"
                                label="数据库名"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="180">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="openDialogDB('编辑数据库', scope.row)">编辑</el-link>
                                <el-link type="danger" @click="deleteDb(scope.row)">删除</el-link>
                                <el-link type="success" @click="testConnectDBRow(scope.row)">测试连接</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="数据库表">
                    <el-select v-model="selectDb.id" placeholder="请选择数据库" style="width:200px;" @change="changeDb"
                               clearable>
                        <el-option
                                v-for="item in dbList"
                                :key="item.id"
                                :label="item.tableSchema"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input v-model="tableName" placeholder="请输入表名" style="width:200px;" clearable
                              @change="refreshTableList" @keydown="refreshTableList">
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="refreshTableList"></i>
                    </el-input>
                    <el-button type="primary" icon="el-icon-refresh" circle @click="refreshTableList"></el-button>
                    <el-button type="primary" :disabled="multipleSelection.length == 0" @click="openGenModal">
                        生成代码({{multipleSelection.length}})
                    </el-button>
                    <el-table
                            :data="tableList"
                            style="width: 100%"
                            :height="autoHeightTable()"
                            :row-class-name="tableRowClassName"
                            ref="multipleTable"
                            @selection-change="handleSelectionChange"
                            @row-click="clickRow">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="tableName"
                                label="表名"
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="comments"
                                label="说明"
                                min-width="180">
                        </el-table-column>
                        <!--                        <el-table-column-->
                        <!--                                fixed="right"-->
                        <!--                                label="操作"-->
                        <!--                                width="180">-->
                        <!--                            <template slot-scope="scope">-->
                        <!--                                <el-link type="success" @click="openGenModalRow(scope.row)">生成代码</el-link>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                    </el-table>
                    <el-link type="success" style="font-size: 20px;"> 总共有 {{tableList.length}} 张表</el-link>
                </el-tab-pane>


                <el-tab-pane label="SQL">
                    <el-select v-model="selectDb.id" placeholder="请选择数据库" style="width:200px;" @change="changeDb"
                               clearable>
                        <el-option
                                v-for="item in dbList"
                                :key="item.id"
                                :label="item.tableSchema"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input v-model="tableName" placeholder="请输入表名" style="width:200px;" clearable
                              @change="refreshTableList" @keydown="refreshTableList">
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="refreshTableList"></i>
                    </el-input>
                    <el-button type="primary" icon="el-icon-refresh" circle @click="refreshTableList"></el-button>
                    <el-button type="primary" :disabled="multipleSelection.length == 0" @click="openGenModal">
                        生成代码({{multipleSelection.length}})
                    </el-button>
                    <el-table
                            :data="tableList"
                            style="width: 100%"
                            :height="autoHeightTable()"
                            :row-class-name="tableRowClassName"
                            ref="multipleTable"
                            @selection-change="handleSelectionChange"
                            @row-click="clickRow">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="tableName"
                                label="表名"
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="comments"
                                label="说明"
                                min-width="180">
                        </el-table-column>
                        <!--                        <el-table-column-->
                        <!--                                fixed="right"-->
                        <!--                                label="操作"-->
                        <!--                                width="180">-->
                        <!--                            <template slot-scope="scope">-->
                        <!--                                <el-link type="success" @click="openGenModalRow(scope.row)">生成代码</el-link>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                    </el-table>
                    <el-link type="success" style="font-size: 20px;"> 总共有 {{tableList.length}} 张表</el-link>
                </el-tab-pane>


                <!--                <el-tab-pane label="模板配置">-->
                <!--                    <el-input v-model="tableName" placeholder="请输入模板名称" style="width:200px;" clearable>-->
                <!--                        <i slot="suffix" class="el-input__icon el-icon-search"></i>-->
                <!--                    </el-input>-->
                <!--                    <el-button type="primary" icon="el-icon-refresh" circle @click="refreshTableList"></el-button>-->
                <!--                    <el-button type="primary" @click="openGenModal">-->
                <!--                        新增模板-->
                <!--                    </el-button>-->
                <!--                    <el-table-->
                <!--                            :data="tableList"-->
                <!--                            style="width: 100%"-->
                <!--                            :height="autoHeightTable()"-->
                <!--                            :row-class-name="tableRowClassName"-->
                <!--                            @selection-change="handleSelectionChange">-->
                <!--                        <el-table-column-->
                <!--                                type="selection"-->
                <!--                                width="55">-->
                <!--                        </el-table-column>-->
                <!--                        <el-table-column-->
                <!--                                prop="tableName"-->
                <!--                                label="表名"-->
                <!--                                min-width="180">-->
                <!--                        </el-table-column>-->
                <!--                        <el-table-column-->
                <!--                                prop="comments"-->
                <!--                                label="说明"-->
                <!--                                min-width="180">-->
                <!--                        </el-table-column>-->
                <!--                        <el-table-column-->
                <!--                                fixed="right"-->
                <!--                                label="操作"-->
                <!--                                width="180">-->
                <!--                            <template slot-scope="scope">-->
                <!--                                <el-link type="success" @click="openGenModalRow(scope.row)">生成代码</el-link>-->
                <!--                            </template>-->
                <!--                        </el-table-column>-->
                <!--                    </el-table>-->
                <!--                    <el-link type="success" style="font-size: 20px;"> 总共有 {{tableList.length}} 张表</el-link>-->
                <!--                </el-tab-pane>-->
                <!--                <el-tab-pane label="模板管理">模板管理</el-tab-pane>-->
                <!--                <el-tab-pane label="生成代码预览">-->
                <!--                    <el-tabs :tab-position="handlePosition(tabPosition)" style="height: 100%;">-->
                <!--                        <el-tab-pane label="用户管理">用户管理</el-tab-pane>-->
                <!--                        <el-tab-pane label="配置管理">配置管理</el-tab-pane>-->
                <!--                        <el-tab-pane label="角色管理">角色管理</el-tab-pane>-->
                <!--                        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>-->
                <!--                    </el-tabs>-->
                <!--                </el-tab-pane>-->
            </el-tabs>

            <!-- 数据库信息弹窗 -->
            <el-dialog
                    :width="'80%'"
                    :title="titleDB"
                    :visible.sync="diaVisibleDB"
                    v-if="diaVisibleDB"
                    :top="'15vh'"
                    :close-on-click-modal="false"
            >
                <div class="dia_content">
                    <el-form :model="dbInfo" :rules="dbRules" ref="dbInfo" label-width="100px">
                        <el-form-item label="版本" prop="dbName">
                            <el-select v-model="dbInfo.dbName" placeholder="请选择数据库版本"
                                       @change="changeDbTypes">
                                <el-option v-for="item in dbTypeArray" :label="item.type" :key="item.type"
                                           :value="item.type"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="驱动" prop="driver">
                            <el-select v-model="dbInfo.driver" placeholder="请选择数据库驱动" disabled>
                                <el-option v-for="item in dbTypeArray" :label="item.driver" :key="item.type"
                                           :value="item.driver"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="账号" prop="userName">
                            <el-input v-model="dbInfo.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="dbInfo.password"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="url">
                            <el-input v-model="dbInfo.url">
                                <i slot="suffix" class="el-input__icon el-icon-link test-connect"
                                   @click="testConnectDB()"
                                   style="width: 100px;">测试连接</i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="数据库名" prop="tableSchema">
                            <el-input v-model="dbInfo.tableSchema"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="diaVisibleDB=false"> 取 消</el-button>
                    <el-button type="primary" @click="doSubmitDB"> 确 定</el-button>
                </div>
            </el-dialog>

            <!-- 生成代码配置选择 -->
            <el-dialog
                    :width="'80%'"
                    title="生成代码配置"
                    :visible.sync="diaVisibleCode"
                    v-if="diaVisibleCode"
                    :top="'15vh'"
                    @close="closeGenModal"
                    :close-on-click-modal="false"
            >
                <div class="dia_content">
                    <el-form :model="tempForm" :rules="tempRules" ref="tempForm" label-width="200px">
                        <el-form-item label="包名" prop="packageName">
                            <el-input v-model="tempForm.packageName"></el-input>
                        </el-form-item>
                        <el-form-item label="开发人" prop="functionAuthor">
                            <el-input v-model="tempForm.functionAuthor"></el-input>
                        </el-form-item>
                        <el-form-item label="表前缀" prop="tableNamePrefix">
                            <el-input v-model="tempForm.tableNamePrefix"></el-input>
                        </el-form-item>
                        <el-form-item label="生成存储路径" prop="genPath">
                            <el-input v-model="tempForm.genPath"></el-input>
                        </el-form-item>
                        <el-form-item label="模板格式" prop="tplCategory">
                            <el-select v-model="tempForm.tplCategory" placeholder="请选择模板格式">
                                <el-option v-for="item in tplCategoryArray" :label="item.label" :key="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生成java模板" prop="genJavaTempName">
                            <el-select v-model="tempForm.genJavaTempName" placeholder="请选择生成java模板">
                                <el-option v-for="item in javaGroupTempArray" :label="item" :key="item"
                                           :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生成web模板" prop="genWebTempName">
                            <el-select v-model="tempForm.genWebTempName" placeholder="请选择生成web模板">
                                <el-option v-for="item in webGroupTempArray" :label="item" :key="item"
                                           :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeGenModal"> 取 消</el-button>
                    <el-button type="primary" @click="doGenCode"> 确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script th:src="@{js/index.js}"></script>
<script th:src="@{js/util.js}"></script>
<script>
    /**
     * 　  （1）beforeCreate（）       实例创建前触发
     * 　　（2）created（）                实例创建完成，
     * 　　（3）beforeMount（）        模板渲染前，可以访问数据，模板编译完成，虚拟DOM已经存在
     * 　　（4）mounted（）              模板渲染完成，可以拿到DOM节点和数据
     * 　　（5）beforeUpdate（）        更新前
     * 　　（6）updated（）               更新完成
     * 　　（7）activated（）         　 激活前
     * 　　（8）deactivated（）         激活后
     * 　　（9）beforeDestroy（）　 销毁前
     * 　　（10）destroyed（）　　  销毁后
     */
    new Vue({
        el: '#app',
        data: function () {
            return {
                tabPosition: 'left',
                dbList: [], // 数据库列表
                tableList: [],  // 表信息列表
                selectDb: {}, // 选中的数据库
                tableName: "", // 表名搜索
                multipleSelection: [], // 选中的表信息
                diaVisibleDB: false, // 数据库信息 弹窗控制
                dbInfo: {}, // 数据库表单信息
                dbSearchForm: {
                    id: "",
                    tableName: "",
                }, // 数据库搜索信息
                titleDB: "",
                dbRules: {
                    dbName: [
                        {required: true, message: '选择版本', trigger: 'change'},
                    ],
                    driver: [
                        {required: true, message: '选择驱动', trigger: 'change'}
                    ],
                    userName: [
                        {required: true, message: '请输入账号', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'change'}
                    ],
                    url: [
                        {required: true, message: '请输入地址', trigger: 'change'}
                    ],
                    tableSchema: [
                        {required: true, message: '请输入数据库名', trigger: 'change'}
                    ],
                },
                dbTypeArray: [
                    {"type": "mysql5.7", "driver": "com.mysql.jdbc.Driver"},
                    {"type": "mysql8.0", "driver": "com.mysql.cj.jdbc.Driver"},
                ],
                diaVisibleCode: false, // 模板配置弹窗
                tempList: [], // 模板数据
                // 模板信息
                tempForm: {
                    packageName: "com.wll", // 包名
                    functionAuthor: "wanglulu", // 开发人员
                    tableNamePrefix: "", // 表前缀
                    tplCategory: "crud", // 使用的模板（crud单表操作 tree树表操作 sub主子表操作）
                    genPath: "D:\\genCode\\", // 生成路径
                    genJavaTempName: "mybatis", // 生成java模板
                    genWebTempName: "vue2ElementUI", // 生成web模板
                },
                tempRules: {
                    packageName: [
                        {required: true, message: '输入包名', trigger: 'change'},
                    ],
                    genPath: [
                        {required: true, message: '输入生成存储路径', trigger: 'change'}
                    ],
                    genJavaTempName: [
                        {required: true, message: '选择生成java模板', trigger: 'change'}
                    ],
                    genWebTempName: [
                        {required: true, message: '选择生成web模板', trigger: 'change'}
                    ],
                    tplCategory: [
                        {required: true, message: '选择模板格式', trigger: 'change'}
                    ],
                },
                // java分组模板
                javaGroupTempArray: [
                    "mybatis",
                    "mybatisPlus",
                    "ruoyi",
                    "tnt",
                ],
                // web模板分组
                webGroupTempArray: [
                    "vue2ElementUI",
                    "vue3ElementUIPlus",
                ],
                // 模板格式
                tplCategoryArray: [
                    {label: "crud单表", value: "crud"},
                    {label: "tree树表", value: "tree"},
                    {label: "sub主子表", value: "sub"}
                ],
            }
        },
        created() {
        },
        mounted() {
            this.refreshDBList();
        },
        methods: {
            autoHeightTable() {
                return (Number(window.innerHeight) - 310);
            },
            // 查询数据库驱动
            refreshDBList() {
                getDbList(this);
            },
            // 表格隔行变色
            tableRowClassName({row, rowIndex}) {
                if ((rowIndex % 2) === 0) {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }
            },
            // 数据库表选择
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 点击一行时选中
            clickRow(row) {
                // 多选选中行
                // 根据id判断当前点击的是否被选中
                const selected = this.multipleSelection.some(item => item.tableName === row.tableName)
                if (!selected) {
                    // 选择
                    this.multipleSelection.push(row)
                    this.$refs.multipleTable.toggleRowSelection(row, true);
                } else {
                    // 取消
                    var finalArr = this.multipleSelection.filter((item) => {
                        return item.tableName !== row.tableName
                    })
                    // 取消后剩余选中的
                    this.multipleSelection = finalArr
                    this.$refs.multipleTable.toggleRowSelection(row, false);
                }
            },
            // 切换到数据库表 选择数据库
            changeDb(val) {
                var dbInfo = {};
                this.dbList.forEach(item => {
                    if (val === item.id) {
                        dbInfo = item;
                    }
                });
                this.selectDb = dbInfo;
                this.dbSearchForm.id = dbInfo.id;
                getDbTableList(this, this.dbSearchForm);
            },
            // 搜索数据库表信息
            refreshTableList() {
                let dbSearchForm = this.dbSearchForm;
                if (dbSearchForm.id === '') {
                    failMsg(this, "请选择数据库")
                    return;
                }
                dbSearchForm.tableName = this.tableName;
                getDbTableList(this, dbSearchForm);
            },
            // 选择数据版本
            changeDbTypes(val) {
                this.dbInfo.dbName = val;
                var driver = "";
                this.dbTypeArray.forEach(item => {
                    if (val === item.type) {
                        driver = item.driver;
                    }
                })
                this.dbInfo.driver = driver;
            },
            // 数据库 新增 修改 弹窗
            openDialogDB(titleDB, dbInfo) {
                if (dbInfo !== '') {
                    // 修改
                    this.dbInfo = dbInfo;
                } else {
                    // 新增
                    this.dbInfo = {
                        id: "",
                        dbName: this.dbTypeArray[0].type,
                        driver: this.dbTypeArray[0].driver,
                        userName: "root",
                        password: "123456",
                        url: "jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&useSSL=false",
                        tableSchema: "",
                    };
                }
                this.titleDB = titleDB;
                this.diaVisibleDB = true;
            },
            // 数据库弹窗 提交
            doSubmitDB() {
                this.$refs['dbInfo'].validate((valid) => {
                    if (valid) {
                        saveDb(this, this.dbInfo)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 数据库删除
            deleteDb(dbInfo) {
                this.$confirm('此操作将永久删除该连接, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDb(this, dbInfo);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 测试数据库连接
            testConnectDB() {
                testConnectDb(this, this.dbInfo);
            },
            // 测试数据库连接
            testConnectDBRow(row) {
                testConnectDb(this, row);
            },
            // 生成代码
            openGenModal() {
                this.diaVisibleCode = true;
            },
            // 生成代码
            closeGenModal() {
                this.diaVisibleCode = false;
            },
            // 生成代码
            doGenCode() {
                let that = this;
                let params = that.tempForm;
                this.multipleSelection.forEach(table => {
                    params.tableName = table.tableName;
                    params.tableComment = table.comments;
                    params.dbConfig = that.selectDb;
                    console.log(params)
                    doGenCodeSave(this, params);
                });
            }
        }
    });
</script>
</body>
</html>